<template>
    <div>
      <label for="account">账号:</label>
      <input type="text" id="account" v-model="loginForm.acc" />
      <br />
      <label for="password">密码:</label>
      <input type="password" id="password" v-model="loginForm.pwd" />
      <br />
      <button @click="handler" :disabled="loading">登录<template v-if="loading">中...</template></button>
    </div>
  </template>
  
  <script>
  import { ref } from "vue";
  import { useRouter } from "vue-router";
  
  export default {
    setup() {
      const loginForm = ref({
        acc: "",
        pwd: ""
      });
  
      const loading = ref(false);
  
      const router = useRouter();
  
      const handler = async () => {
        loading.value = true;
        // 模拟登录请求
        await new Promise(resolve => setTimeout(resolve, 1000));
        if (loginForm.value.acc === "admin" && loginForm.value.pwd === "admin") {
          localStorage.setItem("account", loginForm.value.acc);
          router.push("/home");
        } else {
          router.push("/error");
        }
        loading.value = false;
      };
  
      return {
        loginForm,
        loading,
        handler
      };
    }
  };
  </script>
  
  <style scoped>
  input {
    padding: 6px 10px;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid #ccc;
    outline: none;
  }
  button {
    padding: 8px 16px;
    font-size: 16px;
    border-radius: 4px;
    background-color: #409eff;
    color: #fff;
    border: none;
    cursor: pointer;
    outline: none;
  }
  button:disabled {
    background-color: #c1c1c1;
    color: #fff;
    cursor: not-allowed;
  }
  </style>
